<template>
    <div class="illness-container">
        <div class="top-box">
            <MyEcharts :option="option1" width="24%" height="100%" />
            <MyEcharts :option="option2" width="24%" height="100%" />
            <MyEcharts :option="option3" width="24%" height="100%" />
            <MyEcharts :option="option4" width="24%" height="100%" />
        </div>
        <div class="middle-box">
            <div>
                <MyEcharts :option="option5" width="100%" height="100%" />
            </div>
            <div>
                <MyEcharts :option="option6" width="100%" height="100%" />
            </div>
            <div>
                <span style="font-size:20px;font-weight:bold">今日医生</span>
                <el-table :data="doctorList">
                    <el-table-column prop="name" label="医生"></el-table-column>
                    <el-table-column prop="department" label="科室"></el-table-column>
                    <el-table-column prop="count" label="看诊人数"></el-table-column>
                    <el-table-column prop="file" label="本周处方"></el-table-column>
                    <el-table-column prop="rating" label="患者满意度" width="130px"></el-table-column>
                    <el-table-column prop="type" label="医院评级"></el-table-column>
                </el-table>
            </div>
        </div>
        <div class="bottom-box">
            <MyEcharts :option="option7" width="100%" height="100%" />
        </div>

    </div>
</template>

<script>
import MyEcharts from "@/components/MyEcharts.vue";
import { api_infomationcenter_disease } from "@/apis/informationCenter";
export default {
    components: { MyEcharts },
    data() {
        return {
            time: 0,
            diseaseInfo: {},
            doctorList: [],
            option1: {},
            option2: {},
            option3: {},
            option4: {},
            option5: {},
            option6: {},
            option7: {}
        }
    },
    watch: {
        time() {
            this.$nextTick(() => {
                this.getDiseaseInfo()
            })
        }
    },
    created() {
        this.getDiseaseInfo()

    },
    beforeDestroy() {
        clearTimeout(this.timer)
    },
    methods: {
        async getDiseaseInfo() {
            this.timer = setTimeout(() => {
                this.time++
                clearTimeout(this.timer)
            }, 5000);
            let res = await api_infomationcenter_disease()
            // console.log(res.data.doctorList);
            // console.log("====", res.data.registerCharts);
            // console.log("当前科室Top3", res.data.curTop3);
            // console.log("本周科室Top3", res.data.weekTop3);
            // console.log("医疗器材消耗", res.data.equipCharts);
            // console.log("药品消耗", res.data.drugsCharts);
            // console.log("疫苗消耗", res.data.vaccinesCharts);
            // console.log("111111", res.data.typeCharts);
            this.diseaseInfo = res.data
            this.doctorList = res.data.doctorList
            this.option1 = {
                polar: {
                    radius: [30, '80%']
                },
                radiusAxis: {
                    max: this.diseaseInfo.registerCharts.max
                },
                angleAxis: {
                    type: 'category',
                    data: this.diseaseInfo.registerCharts.type,
                    startAngle: 75
                },
                tooltip: {},
                series: {
                    type: 'bar',
                    data: this.diseaseInfo.registerCharts.data,
                    coordinateSystem: 'polar',
                    label: {
                        show: true,
                        position: 'middle',
                        formatter: '{b}: {c}'
                    }
                },
                animation: false
            }
            this.option2 = {
                title: {
                    text: this.diseaseInfo.equipCharts.total + "",
                    subtext: "医疗器材消耗"
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.diseaseInfo.equipCharts.type,
                    axisTick: {
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: this.diseaseInfo.equipCharts.data,
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            }
            this.option3 = {
                title: {
                    text: this.diseaseInfo.drugsCharts.total + "",
                    subtext: "药品消耗"
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.diseaseInfo.drugsCharts.type,
                    axisTick: {
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: this.diseaseInfo.drugsCharts.data,
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            }
            this.option4 = {
                title: {
                    text: this.diseaseInfo.vaccinesCharts.total + "",
                    subtext: "疫苗消耗"
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.diseaseInfo.vaccinesCharts.type,
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: this.diseaseInfo.vaccinesCharts.data,
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            }
            this.option5 = {
                title: {
                    text: "当前科室TOP3",
                    left: "20%",
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.diseaseInfo.curTop3
                    }
                ]
            }
            this.option6 = {
                title: {
                    text: "本周科室TOP3",
                    left: "20%",
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.diseaseInfo.weekTop3
                    }
                ]
            }
            this.option7 = {
                color: ["#5870cb", "#91cd70", "#faca55"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                grid: {},
                xAxis: [{
                    type: "category",
                    data: this.diseaseInfo.typeCharts.type,
                }],
                yAxis: [{
                    type: "value"
                }],
                series: [{
                    name: "等候人数",
                    type: "bar",
                    barWidth: "20%",
                    markLine: {
                        lineStyle: {
                            type: 'dashed'
                        },
                        data: [[{ type: 'min' }, { type: 'max' }]]
                    },
                    data: this.diseaseInfo.typeCharts.waitdata
                },
                {
                    name: "待缴费",
                    type: "bar",
                    barWidth: "20%",
                    data: this.diseaseInfo.typeCharts.waitpaydata
                },
                {
                    name: "复诊",
                    type: "bar",
                    barWidth: "20%",
                    data: this.diseaseInfo.typeCharts.repeatdata
                },
                ]
            }
        }
    }
}

</script>

<style lang="less" scoped>
.illness-container {
    width: 100%;
    height: 100%;

    .top-box {
        margin-top: 20px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 270px;
    }

    .middle-box {
        margin-top: 20px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 320px;

        div {
            height: 100%;
        }

        div:nth-child(1) {
            flex: 1;
        }

        div:nth-child(2) {
            flex: 1;
        }

        div:nth-child(3) {
            flex: 2;
        }
    }

    .bottom-box {
        margin-top: 40px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 270px;
        margin-bottom: 40px;
    }
}
</style>